<template>
  <div class="rank-wrapper">
      <div class="rank-tab">
          <div class="rank-tab-header">
            <div class="tab-header-item"
                :class="{'active': active == 'share'}"
                @click.stop="changeTab('share')"
            >分享榜</div>
            <div class="tab-header-item"
                :class="{'active': active == 'gratuity'}"
                @click.stop="changeTab('gratuity')"
            >打赏榜</div>
          </div>
          <div class="rank-tab-body">
              <div class="rank-track" :style="{transform: 'translate3d('+trackStyleLeft+',0,0)'}">
                <div class="tab-body-item">
                    <div class="rank-list-wrapper">
                        <ul class="rank-list">
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请18人</p>
                                </div>
                                <span class="order"><i class="rank-1"></i></span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请18人</p>
                                </div>
                                <span class="order"><i class="rank-2"></i></span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请18人</p>
                                </div>
                                <span class="order"><i class="rank-3"></i></span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请18人</p>
                                </div>
                                <span class="order">4</span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请18人</p>
                                </div>
                                <span class="order">5</span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请18人</p>
                                </div>
                                <span class="order">6</span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p>邀请18人</p>
                                </div>
                                <span class="order">7</span>
                            </li>
                        </ul>

                    </div>
                </div>
                <div class="tab-body-item">
                    <div class="rank-list-wrapper">
                        <ul class="rank-list">
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                </div>
                                <span class="order"><i class="rank-1"></i></span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                </div>
                                <span class="order"><i class="rank-2"></i></span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                </div>
                                <span class="order"><i class="rank-3"></i></span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                </div>
                                <span class="order">4</span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                </div>
                                <span class="order">5</span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                </div>
                                <span class="order">6</span>
                            </li>
                            <li class="rank-media media">
                                <div class="media-object pull-left"><img src="../Live/img/avtar_list.png" class="img-avtar" alt=""></div>
                                <div class="media-body over-hidden">
                                    <h4 class="media-heading">熊子闲暇</h4>
                                    <p class="color-orange">￥8.88</p>
                                </div>
                                <span class="order">7</span>
                            </li>
                        </ul>

                    </div>
                </div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {},
  data() {
    return {
        active: 'share'
    };
  },
  computed: {
    trackStyleLeft(){
        return this.active == 'share' ? 0 : '-50%';
    }
  },
  methods: {
      changeTab(tabName){
          this.active = tabName;
          
      }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
.rank-wrapper {
    height: 500px;;

    .rank-track {
        width: 200%;
        display: flex;
        transition: all ease .3s;
    }

    .tab-body-item {
        flex: 1;
    }

    .rank-tab-header {
        display: flex;
        width: 480px;
        margin: 30px auto;
        border: 1px solid #1549eb;
        font-size: 30px;
        color:#1549eb;
        text-align: center;
        border-radius: 8px;
        overflow: hidden;
    }

    .tab-header-item {
        flex: 1;
        height: 64px;
        line-height: 64px;
        &.active {
            color: #fff;
            background-color:#1549eb;
        }
    }
    
    .rank-tab-body {
        width: 100%;
        overflow: hidden;
    }

    .rank-media {
        display: flex;
        padding: 20px;
        padding-left: 60px;
        font-size: 28px;
        color: #333;
        position: relative;
        align-items: center;
        &:after{
            display: block;
            content: '';
            width: 100%;
            height: 2px;
            background-color: #f3f3f3;
            position: absolute;
            left: 0;
            bottom: 0;
        }

        .order {
            width: 40px;
            height: 66px;
            position: absolute;
            top: 20px;
            left: 0;
            text-align: center;
            line-height: 66px;
        }
    }
    .media-object {
        width: 66px;
        height: 66px;
        margin-right: 20px;
        .img-avtar{
            vertical-align: middle;
        }
    }

    .media-body {
        width: 100%;
        display: flex;
    }
    .media-heading { flex: 1; }
}

.rank-list-wrapper {
    background: #fff;
    padding: 0 15px 0 35px;
}
</style>